<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
        <title>美食每客</title>
        <link rel="icon" href="./../images/favico.ico">
        <!--不同屏幕尺寸根字体设置-->
        <script src="./../js/base.js"></script>
        <!--element-ui的样式-->
        <link rel="stylesheet" href="../../backend/plugins/element-ui/index.css" />
        <!--引入vant样式-->
        <link rel="stylesheet" href="../styles/vant.min.css"/>
        <!-- 引入样式  -->
        <link rel="stylesheet" href="../styles/index.css" />
        <!--本页面内容的样式-->
        <link rel="stylesheet" href="./../styles/address-edit.css" />
    </head>
    <body>
        <div id="address_edit" class="app">
            <div class="divHead">
                <div class="divTitle">
                    <i class="el-icon-arrow-left" @click="goBack"></i>{{title}}
                </div>
            </div>
            <div class="divContent">

                <div class="divItem">
                    <span>昵称：</span>
                    <el-input placeholder="请填写要修改的昵称" v-model="form.name"  maxlength='20' style="width: calc(100% - 80rem);"/></el-input>
                </div>
                <div class="divItem">
                    <span>email：</span>
                    <el-input placeholder="请填写要修改的email" v-model="form.phone"  maxlength='20' style="width: calc(100% - 80rem);"/></el-input>
                </div>
                <div class="divItem">
                    <span>密码</span>
                    <el-input placeholder="密码" v-model="form.password"  maxlength='140'/></el-input>
                </div>
                <div class="divItem">
                    <span>性别：</span>
                    <span class="spanChecked" @click="form.sex = '1'">
                    <i :class="{iActive:form.sex === '1'}"></i>
                    先生
                   </span>
                    <span class="spanChecked" @click="form.sex = '0'">
                    <i :class="{iActive:form.sex === '0'}"></i>
                    女士
                </span>
                </div>
                <div class="divSave" @click="saveUserEdit">保存修改</div>
            </div>
        </div>
        <!-- 开发环境版本,包含了有帮助的命令行警告 -->
        <script src="../../backend/plugins/vue/vue.js"></script>
        <!-- 引入组件库 -->
        <script src="../../backend/plugins/element-ui/index.js"></script>
        <!-- 引入vant样式 -->
        <script src="./../js/vant.min.js"></script>
        <script src="./../js/common.js"></script>
        <script src="./../api/address.js"></script>
        <!-- 引入axios -->
        <script src="../../backend/plugins/axios/axios.min.js"></script>
        <script src="./../js/request.js"></script>
        <script src="./../api/member.js"></script>
        <script>
            new Vue({
                el:"#address_edit",
                data(){
                    return {
                        title:'',
                        form:{
                            id:'',
                            name:'',//昵称
                            phone:undefined,//email
                            sex:'1',//0表示女 1 表示男
                            password:'',//密码
                            idNumber:'无',//标签
                        },
                        activeIndex :0
                    }
                },
                computed:{},
                created(){
                    this.userPhone =sessionStorage.getItem("userPhone")
                    this.initData()
                },
                mounted(){
                },
                methods:{
                    goBack(){
                        history.go(-1)
                    },
                    async initData(){
                        const params = this.userPhone
                        if(params){
                            this.title = '修改个人信息'
                            const res = await queryUserByPhone(params)
                            if(res.code === 1){
                                this.form = res.data
                            }else{
                                this.$notify({ type:'warning', message:res.msg});
                            }
                        }
                    },
                    async saveUserEdit(){
                        const form = this.form
                        if(!form.name){
                            this.$notify({ type:'warning', message:'请输入昵称'});
                            return
                        }
                        if(!form.phone){
                            this.$notify({ type:'warning', message:'请输入更改的邮箱'});
                            return
                        }
                        if(!form.password){
                            this.$notify({ type:'warning', message:'请输入更改的密码'});
                            return
                        }
                        const reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
                        if(!reg.test(form.phone)){
                            this.$notify({ type:'warning', message:'手机邮箱不合法'});
                            return
                        }
                        let res= {}
                        res = await updateUserByPhone(this.form)

                        if(res.code === 1){
                            sessionStorage.setItem("name", this.form.name)
                            sessionStorage.setItem("userPhone", this.form.phone)
                            window.requestAnimationFrame(()=>{
                                window.location.replace('/front/page/user.html')
                            })
                        }else{
                            this.$notify({ type:'warning', message:res.msg});
                        }
                    },
                    deleteAddress(){
                        this.$dialog.confirm({
                            title: '确认删除',
                            message: '确认要删除当前地址吗？',
                        })
                        .then( async () => {
                            const res = await deleteAddressApi({ids:this.id })
                            if(res.code === 1){
                                window.requestAnimationFrame(()=>{
                                    window.location.replace('/front/page/address.html')
                                })
                            }else{
                                this.$notify({ type:'warning', message:res.msg});
                            }
                        })
                        .catch(() => {
                        });
                    },
                }
            })
            </script>
    </body>
</html>
